<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		li{list-style:none;}
		.wrap{
			width:1000px;
			height:409px;
			margin:100px auto;
			position:relative;
		}
		.wrap a{
			display: none;
		}
		.wrap .show{
			display:block;
		}
		#prev,#next{
			position:absolute;
			top:45%;
			transition:all .5s;
			opacity:.7;
			cursor:pointer;
		}
		#prev{
			left:20px;
		}
		#next{
			right:20px;
		}
		#prev:hover,#next:hover{
			transform: scale(1.1);
			opacity:1;
		}
		.dotList{
			position:absolute;
			bottom:15px;
			left:42%;
		}
		.dotList li{
			width: 10px;
			height: 10px;
			border-radius:50%;
			background-color:#fff;
			float:left;
			margin-right:10px;
		}
		.dotList .focus{
			background-color:#69aaec;
		}

	</style>
</head>
<body>
	<div class="wrap" id="wrap">
		<a href="#" class="show"><img src="images/1.jpg" alt=""></a>
		<a href="#"><img src="images/2.jpg" alt=""></a>
		<a href="#"><img src="images/3.jpg" alt=""></a>
		<a href="#"><img src="images/4.jpg" alt=""></a>
		<a href="#"><img src="images/5.jpg" alt=""></a>
		<a href="#"><img src="images/6.jpg" alt=""></a>
		<img src="images/l.png" alt="" id="prev">
		<img src="images/r.png" alt="" id="next">
		<ul class="dotList">
			<li class="focus"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

	<script>
		var next = document.getElementById("next");
		var prev= document.getElementById("prev");
		var wrap = document.getElementById("wrap");
		var imgList = wrap.getElementsByTagName("a");
		var dotList = wrap.getElementsByTagName("li")

		var n = 0;	//代表当前显示的是第几张


		// 改变小圆点的选中状态
		// 依赖变量n的正确性
		function changeDot(){
			//清除掉所有小圆点的选中样式
			for(var j = 0; j < dotList.length;j++){
				dotList[j].className = ""
			}
			//让第n个小圆点添加focus类名
			dotList[n].className = "focus"
		}


		// 显示指定的图片
		// 依赖变量n
		function changeImg(){
			// 将所有li先隐藏(去掉class)
			for(var i = 0; i < imgList.length;i++){
				imgList[i].className = ""
			}
			// 让当前该显示的那张显示
			imgList[n].className = "show";
		}


		next.onclick = function(){
			if(n < (imgList.length - 1)){
				n++;
			}
			else{
				n = 0;
			}
			// 显示指定的图片
			changeImg()
			//改变小圆点选中状态
			changeDot()
		}

		prev.onclick = function(){
			if(n !== 0){
				n--;
			}
			else{
				n = imgList.length - 1
			}
			// 显示指定的图片
			changeImg()
			//改变小圆点选中状态
			changeDot()
		}



	</script>
</body>
</html>